<script setup lang="ts">
import {ref} from "vue";
import {
  addConsigneeAPI
} from "@/axios/api";
import {ElMessage} from "element-plus";

const consignee = ref({
  name:"",
  person:"",
  phone:"",
  address:"",
  remark:""
})
function addConsignee() {
  if (!consignee.value.name) {
    ElMessage.error("客户名称不能为空")
    return
  }
  if (!consignee.value.phone) {
    ElMessage.error("电话不能为空")
    return
  }
  if (!consignee.value.address) {
    ElMessage.error("地址不能为空")
    return
  }
  console.log(consignee.value)
  addConsigneeAPI(consignee.value).then(data => {
    // console.log(data)
    ElMessage.success(data.data.message)
    // empty()
  })
}

function empty() {
  for (const key in consignee.value) {
    consignee.value[key] = ""
  }
}

</script>
<template>
  <el-form
      :model="consignee"
      label-width="auto"
      style="max-width: 600px"
  >
    <el-form-item
        label="客户名称:"
    >
      <el-input
          placeholder="请输入客户名称"
          v-model="consignee.name"
      />
    </el-form-item>

    <el-form-item
        label="客户地址:"
    >
      <el-input
          placeholder="请输入客户地址"
          v-model="consignee.address"
      />
    </el-form-item>

    <el-form-item
        label="客户电话:"
    >
      <el-input
          v-model="consignee.phone"
          type="number"
          placeholder="请输入客户电话"
      />
    </el-form-item>

    <el-form-item
        label="备注:"
    >
      <el-input
          v-model="consignee.remark"
          type="textarea"
          placeholder="请输入备注信息"
          show-word-limit
          maxlength="250"
      />
    </el-form-item>

    <el-form-item
        label=" "
    >
      <el-button
          type="primary"
          @click="addConsignee"
      >添加
      </el-button>
      <el-button
          @click="empty"
      >取消
      </el-button>
    </el-form-item>
  </el-form>
</template>